app\page.jsx

import Link from "next/link"
import Heading from "@/components/Heading"
import { getFeatureReview } from "@/lib/reviews"

export const metadata = {
    title: "Indie Gamer",
    description: "Only the best indie games, reviewed for you.",
}

async function HomePage() {
    const review = await getFeatureReview()
    return (
        <div>
            <Heading>Indie Gamer</Heading>
            <p className="pb-3">
                Only the best indie games, reviewed for you.
            </p>
            <div className="border  bg-white w-80 sm:w-full shadow hover:shadow-xl">
                <Link className="flex   flex-col sm:flex-row" href={`/reviews/${review.slug}`}>
                    <img src={review.image} alt="" width="320" height="180"
                        className="rounded-t sm:rounded-l sm:rounded-r-none" />
                    <h2 className="text-center py-1 font-orbitron font-semibold sm:px-2">{review.title}</h2>
                </Link>
            </div>
        </div>
    )
}

export default HomePage

metadate 的模板

app\layout.jsx

export const metadata = {
    title: {
        default: "Indie Gamer",
        template: "%s | Indie Gamer",
    }
}

其他頁面

export const metadata = {
    title: "About",
}

結果 : 標題 About | Indie Gamer

大叔的鐵人賽第十七天結束 :)